<template>
  <el-form
    ref="form"
    :model="form"
    :rules="allRules"
    autocomplete="on"
    label-position="right"
    label-width="95px"
  >
    <div v-for="item in allCols" :key="item.colName">
      <el-form-item
        v-if="
          !(item.colName === 'id' && editType === 'add') &&
            item.hiddenIn !== editType
        "
        :label="item.displayName"
        :prop="item.colName"
      >
        <!-- 选择 -->
        <el-select
          v-if="item.dataType === 'select'"
          v-model="form[item.colName]"
          :readonly="item.readOnly || readonly"
          :disabled="item.disabled || disabled"
          @change="onSelectChange(item, form)"
        >
          <el-option
            v-for="opt in item.data.options"
            :key="opt.value"
            :label="opt.name"
            :value="opt.value"
          />
        </el-select>
        <!-- 时间段 -->
        <div v-else-if="item.dataType === 'timeRange'" class="times">
          <el-time-picker
            v-model="form[item.colName]"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="开始时间"
            @change="time(item.colName, $event, 'star')"
          />-
          <el-form-item :prop="`${item.colName}s`">
            <el-time-picker
              v-model="form[`${item.colName}s`]"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="结束时间"
              @change="time(item.colName, $event, 'end')"
            />
          </el-form-item>
        </div>
        <!-- 标题 -->
        <el-divider v-else-if="item.dataType === 'title'">{{
          item.text
        }}</el-divider>
        <!-- 默认 -->
        <el-input
          v-else
          v-model="form[item.colName]"
          :readonly="item.readOnly || readonly"
          :type="item.dataType"
          :maxlength="item.maxlength"
        />
      </el-form-item>
    </div>
    <el-form-item><el-alert
      title="价格牌说明通用模板(可选中下面文字进行复制)"
      type="info"
      :closable="false"
      description="请您在车辆完成充电后立即驶离充电车位。五分钟内驶离的，我们将免收超时占用费。充电完成后的五分钟内未驶离的，自充电完成起按分钟收取超时占用费。"
    /></el-form-item>
    <el-form-item>
      <el-button
        v-if="!readonly"
        type="success"
        @click="onPreview"
      >预览</el-button>
      <el-button
        v-if="!readonly"
        type="primary"
        @click="onSubmit"
      >确定</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import apiDefines from '../commontable/apidefines'

export default {
  name: 'PriceEdit',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    values: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      timeData: {
        period1: {
          time1: '',
          time2: ''
        },
        period2: {
          time1: '',
          time2: ''
        },
        period3: {
          time1: '',
          time2: ''
        }
      },
      form: {},
      rules: {},
      editType: 'edit',
      othercols: [
        {
          displayName: '价格牌说明',
          colName: 'textdesc',
          dataType: 'textarea',
          maxlength: '86'
        }
      ],
      cols: [],
      typeCols: [
        {
          displayName: '模板类型',
          colName: 'templateType',
          dataType: 'select',
          disabled: true,
          data: {
            options: [
              { name: '标准', value: 1 },
              { name: '自定义', value: 2 }
            ]
          }
        },
        {
          displayName: '价格类型',
          colName: 'priceType',
          dataType: 'select',
          data: {
            options: [
              // { name: '自定义', value: 0 },
              { name: '一口价', value: 1 },
              { name: '二段分时价', value: 2 },
              { name: '三段分时价', value: 3 },
              { name: '四段分时价', value: 4 },
              { name: '五段分时价', value: 5 },
              { name: '六段分时价', value: 6 },
              { name: "非特斯拉分时价", value: 10 },
            ]
          }
        }
        // { displayName: '模板样式', colName: 'templateStyle', dataType: 'select', data: { options: [
        //   // { name: '自定义', value: 0 },
        //   { name: '二段分时价', value: 1 },
        //   { name: '三段分时价', value: 2 },
        //   { name: '一口价', value: 4 }
        // ] }}
      ],
      typeRules: {
        priceType: [{ required: true, trigger: 'blur', message: '不能为空' }],
        templateType: [
          { required: true, trigger: 'blur', message: '不能为空' }
        ],
        textdesc: [{ required: true, trigger: 'blur', message: '不能为空' }]
        // templateStyle: [{ required: true, trigger: 'blur', message: '不能为空' }]
      }
    }
  },
  computed: {
    ...mapGetters(['user', 'name', 'avatar', 'roles']),
    allCols() {
      return this.typeCols.concat(this.cols, this.othercols)
    },
    allRules() {
      return Object.assign({}, this.typeRules, this.rules)
    }
  },
  watch: {
    values(newValues) {
      console.log(222222222)
      this.form = Object.assign({}, newValues)
      const obj = this.form
      console.log(this.form.period1)
      console.log(Array.isArray(this.form.period1))
      if (Array.isArray(this.form.period1)) {
        console.log(333)
        this.form.period1 = obj.period1[0]
        this.form.period1s = obj.period1[1]
      }
      if (Array.isArray(this.form.period2)) {
        this.form.period2 = obj.period2[0]
        this.form.period2s = obj.period2[1]
      }
      if (Array.isArray(this.form.period3)) {
        this.form.period3 = obj.period3[0]
        this.form.period3s = obj.period3[1]
      }
      if (Array.isArray(this.form.period4)) {
        this.form.period4 = obj.period4[0]
        this.form.period4s = obj.period4[1]
      }
      if (Array.isArray(this.form.period5)) {
        this.form.period5 = obj.period5[0]
        this.form.period5s = obj.period5[1]
      }
      if (Array.isArray(this.form.period6)) {
        this.form.period6 = obj.period6[0]
        this.form.period6s = obj.period6[1]
      }
      if (Array.isArray(this.form.period7)) {
        this.form.period7 = obj.period7[0];
        this.form.period7s = obj.period7[1];
      }
      if (Array.isArray(this.form.period8)) {
        this.form.period8 = obj.period8[0];
        this.form.period8s = obj.period8[1];
      }
      if (Array.isArray(this.form.period9)) {
        this.form.period9 = obj.period9[0];
        this.form.period9s = obj.period9[1];
      }
      if (Array.isArray(this.form.period10)) {
        this.form.period10 = obj.period10[0];
        this.form.period10s = obj.period10[1];
      }
      if (Array.isArray(this.form.period11)) {
        this.form.period11 = obj.period11[0];
        this.form.period11s = obj.period11[1];
      }
      if (Array.isArray(this.form.period12)) {
        this.form.period12 = obj.period12[0];
        this.form.period12s = obj.period12[1];
      }
      console.log(4444444)
      this.switchType()
    }
  },
  created() {},
  mounted() {
    this.form = Object.assign({}, this.values)
    const obj = this.form
    if (Array.isArray(this.form.period1)) {
      this.form.period1 = obj.period1[0]
      this.form.period1s = obj.period1[1]
    }
    if (Array.isArray(this.form.period2)) {
      this.form.period2 = obj.period2[0]
      this.form.period2s = obj.period2[1]
    }
    if (Array.isArray(this.form.period3)) {
      this.form.period3 = obj.period3[0]
      this.form.period3s = obj.period3[1]
    }
    if (Array.isArray(this.form.period4)) {
      this.form.period4 = obj.period4[0]
      this.form.period4s = obj.period4[1]
    }
    if (Array.isArray(this.form.period5)) {
      this.form.period5 = obj.period5[0]
      this.form.period5s = obj.period5[1]
    }
    if (Array.isArray(this.form.period6)) {
      this.form.period6 = obj.period6[0]
      this.form.period6s = obj.period6[1]
    }
      if (Array.isArray(this.form.period7)) {
        this.form.period7 = obj.period7[0];
        this.form.period7s = obj.period7[1];
      }
      if (Array.isArray(this.form.period8)) {
        this.form.period8 = obj.period8[0];
        this.form.period8s = obj.period8[1];
      }
      if (Array.isArray(this.form.period9)) {
        this.form.period9 = obj.period9[0];
        this.form.period9s = obj.period9[1];
      }
      if (Array.isArray(this.form.period10)) {
        this.form.period10 = obj.period10[0];
        this.form.period10s = obj.period10[1];
      }
      if (Array.isArray(this.form.period11)) {
        this.form.period11 = obj.period11[0];
        this.form.period11s = obj.period11[1];
      }
      if (Array.isArray(this.form.period12)) {
        this.form.period12 = obj.period12[0];
        this.form.period12s = obj.period12[1];
      }
    this.switchType()
  },
  methods: {
    time(e, res, type) {
      // console.log(res);
      // console.log(e);
      // console.log(this.timeData[e]);
      // let arr = [];
      // arr[0] = this.timeData[e].time1;
      // arr[1] = this.timeData[e].time2;
      // this.form[e] = arr;
      // console.log(this.form);
      // if(res == 'period1'){
      // }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const retform = Object.assign({}, this.form)
          // 格式化时间范围
          this.cols.forEach((item) => {
            if (item.dataType === 'timeRange') {
              retform[item.colName] = [
                this.form[item.colName],
                this.form[`${item.colName}s`]
              ]
              if (Array.isArray(retform[item.colName])) {
                retform[item.colName] = retform[item.colName].join('-')
              }
            }
          })
          this.$emit('onSubmit', retform)
        } else {
          console.log('error validate', this.form)
          this.$message.error('表单内有错误，请检查修改后再提交！')
        }
      })
    },
    onCancel() {
      this.$emit('onCancel')
    },
    onPreview() {
      console.log('priview')
    },
    onSelectChange(item, form) {
      console.log('aaa')
      if (item.colName === 'priceType') {
        this.form.templateType = 1
        // this.form.templateStyle = this.form.priceType === 1 ? 4 : 1
      } else if (item.colName === 'templateType') {
        if (this.form.templateType === 2) {
          // 自定义
          // this.form.templateStyle = 0
          this.cols = []
          this.rules = {}
        }
      }
      this.switchType()
    },
    switchType() {
      if (this.form.templateType === 2) {
        // 自定义
      } else {
        if (this.form.priceType === 1) {
          // 一口价
          this.cols = apiDefines.price.editCols
          this.rules = apiDefines.price.editRules
        } else {
          // 分时价
          if (this.form.priceType === 2) {
            // 二段分时
            this.cols = apiDefines.price2.editCols2
            this.rules = apiDefines.price2.editRules
          } else if (this.form.priceType === 3) {
            // 三段分时
            this.cols = apiDefines.price2.editCols
            this.rules = apiDefines.price2.editRules
          } else if (this.form.priceType === 4) {
            // 四段分时
            this.cols = apiDefines.price2.editCols3
            this.rules = apiDefines.price2.editRules
          } else if (this.form.priceType === 5) {
            // 五段分时
            this.cols = apiDefines.price2.editCols4
            this.rules = apiDefines.price2.editRules
          } else if (this.form.priceType === 6) {
            // 六段分时
            this.cols = apiDefines.price2.editCols5
            this.rules = apiDefines.price2.editRules
          } else if (this.form.priceType === 10) {
            // 六段分时
            this.cols = apiDefines.price2.editCols6;
            this.rules = apiDefines.price2.editRuless;
          }
          // 格式化时间范围
          this.cols.forEach((item) => {
            if (item.dataType === 'timeRange') {
              if (typeof this.form[item.colName] === 'string') {
                // this.form[item.colName] = this.form[item.colName]
                //   .split(/[-~]/)
                //   .slice(0, 2);
                const arr = this.form[item.colName].split('-')
                this.form[item.colName] = arr[0]
                // this.form[`${item.colName}s`] = arr[1];
              }
            }
          })
        }
      }
    }
  }
}
</script>
<style scoped>
.line {
  text-align: center;
}
.times {
  display: flex;
}
</style>
